<template>
  <div class="login_wrap">
    <div class="login_left">
      <img src="@/assets/common/login_back.png" alt="">
    </div>
    <div class="login_right">
      <!-- 手机号码登录 -->
      <div v-if="loginFlag" class="login_form">
        <h1>手机号登录</h1>
        <el-form ref="myForm" :model="loginForm" :rules="rules">
          <el-form-item prop="mobile">
            <el-input v-model="loginForm.mobile" placeholder="手机号" />
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" show-password placeholder="密码" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginForm.isAgree">用户平台使用协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width:100%;background: blue;" type="primary" @click="loginMobile">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 扫码登录 部门 -->
      <div v-else class="qrcode_login">
        <h1>扫码登录</h1>
        <img src="@/assets/common/qrcode.jpg" alt="">
      </div>
      <div class="login_type">
        <el-button @click="loginFlag=true">手机号登录</el-button>
        <el-button @click="loginFlag=false">扫码登录</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import { toLoginApi } from '@/api/user'
export default {
  data() {
    return {
      loginFlag: true, // true 手机号 false 扫码
      loginForm: { // 要从表单收集的数据
        mobile: '13800000002', // 手机号
        password: 'hm#qd@23!', // 密码
        isAgree: true// 是否同意协议
      },
      rules: { // 表单的验证规则
        mobile: [// 手机号规则
          { required: true, message: '手机号必填', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        password: [ // 密码的规则
          { required: true, message: '密码必填', trigger: 'blur' },
          {
            min: 6,
            max: 18,
            message: '密码长度在6-18位之间',
            trigger: 'blur'
          }
        ],
        // 自定义规则
        isAgree: [
          { validator: (rule, value, callback) => {
            console.log(value, '-----收集的值')
            // vali--输入框的值
            // rule --当前规则
            // callback 返回提示
            if (value) {
              callback()
            } else { // 抛出错误
              callback(new Error('请勾选用户协议'))
            }
          }, trigger: 'change' }
        ]

      }
    }
  },
  created() {

  },
  methods: {
    async loginMobile() { // 手机号登录接口
      //   this.$refs.myForm.validate 表单组件自带验证方法
      this.$refs.myForm.validate(async(vali) => {
        // vali--true 所有的表单都通过了
        console.log(vali, '-----999999表单通过测试')
        if (vali) {
          // 登录接口
          const res = await toLoginApi(this.loginForm)
          console.log(res, '----登录成功返回的数据')
          // 调用vuex 分模块中的一个mutations SET_TOKEN 将token存到vuex
          this.$store.commit('user/SET_TOKEN', res.data)
          // 提示成功跳转主页
          // this.$message element-ui 提示组件
          this.$message.success({
            message: '登录成功,正在跳转主页',
            duration: 1000
          })
          this.$router.push('/')
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .login_wrap{
    width: 100vw;
    height: 100vh;
    display: flex;
    .login_left{
      width: 65%;
      height: 100vh;
      img{
        width: 100%;
        height: 100vh;
      }
    }
    .login_right{
      width: 35%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .login_form{
        width: 450px;
        height: 450px;
      }
      .login_type{
        position: absolute;
        bottom: 15%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
</style>
